import Link from 'next/link'
import Image from 'next/image'
import { Divider } from 'antd'

// 导航数据配置（可单独提取到constants文件中）
const footerNavItems = [
  { label: '质量科普', href: '/about' },
  { label: '标准检索', href: '/standards' },
  { label: '认证申请', href: '/certification' },
  { label: '检测项点', href: '/inspection' },
  { label: '我的收藏', href: '/favorites' },
]

const partnerPlatforms = [
  { label: '长三角区域一体化服务平台' },
  { label: '客服热线：周一至周日 9:00-22:00' },
  { label: '常州市制造业公共服务平台' },
]

const contactInfo = [
  { label: '0519-8399-8666' },
  { label: '机械零部件行业工业互联网平台' },
]

export default function Footer() {
  return (
    <footer className="bg-gradient-to-b from-[#F2F6FF] to-[#FFFFFF] border-t border-gray-200 mt-auto">
      <div className="container mx-auto text-center text-gray-600 py-4 px-4">
        {/* 主要内容区 - 响应式网格布局 */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 text-left">
          {/* 网站导航区块 */}
          <div className="space-y-4">
            <h2 className="text-lg font-semibold">网站导航</h2>
            <ul className="grid grid-cols-2 gap-2 text-sm">
              {footerNavItems.map((item, index) => (
                <li
                  key={index}
                  className="hover:text-blue-600 transition-colors"
                >
                  <Link href={item.href || '#'}>{item.label}</Link>
                </li>
              ))}
            </ul>
          </div>

          {/* 合作平台区块 */}
          <div className="space-y-4">
            <h2 className="text-lg font-semibold">合作平台</h2>
            <ul className="space-y-2 text-sm">
              {partnerPlatforms.map((item, index) => (
                <li key={index}>{item.label}</li>
              ))}
            </ul>
          </div>

          {/* 联系我们区块 */}
          <div className="space-y-4">
            <h2 className="text-lg font-semibold">联系我们</h2>
            <ul className="space-y-2 text-sm">
              {contactInfo.map((item, index) => (
                <li key={index}>{item.label}</li>
              ))}
            </ul>
          </div>

          {/* 微信二维码区块 */}
          <div className="flex flex-col items-center space-y-2">
            <div className="relative w-[110px] h-[110px]">
              <Image
                src="/images/weima.png"
                alt="微信公众号二维码"
                width={110}
                height={110}
                className="object-contain"
              />
            </div>
            <span className="text-sm">微信扫一扫，使用小程序</span>
          </div>
        </div>

        {/* 备案信息 */}
        <Divider orientation="center" plain className="my-6">
          <div className="text-xs text-gray-500">
            苏ICP备1140591909号-8地址: 江苏省常州市武进区科教城天信路1号
          </div>
        </Divider>
      </div>
    </footer>
  )
}
